<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="__PUBLIC__/static/css/index.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/static/css/perfect-scrollbar.min.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/static/css/purebox.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/static/js/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="__PUBLIC__/static/js/jquery.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/js/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/js/jquery.cookie.js"></script>
</head>
<body class="iframe_body">
<div class="warpper">
    <div class="title">管理中心</div>
    <div class="content start_content">
        <div class="contentWarp">
            <div class="contentWarp_item clearfix">

                <div class="section user_section">
                    <div class="sc_title">
                        <i class="sc_icon"></i>
                        <h3>代理商户信息</h3>
                        <cite>（单位：个）</cite>
                    </div>
                    <div class="sc_warp">
                        <div class="user_item user_today_new">
                            <div class="num">{$nowcount['sum']}</div>
                            <span class="tit">今日新增</span>
                        </div>
                        <div class="user_item user_yest_new">
                            <div class="num">{$yesterday['sum']}</div>
                            <span class="tit">昨日新增</span>
                        </div>
                        <div class="user_item user_month_new">
                            <div class="num">{$month['sum']}</div>
                            <span class="tit">本月新增</span>
                        </div>
                        <div class="user_item user_total">
                            <div class="num">{$userall}</div>
                            <span class="tit">商户总数</span>
                        </div>
                    </div>
                </div>

                <div class="section goods_section">
                    <div class="sc_title">
                        <i class="sc_icon"></i>
                        <h3>商品一览</h3>
                        <cite>（单位：家/件）</cite>
                    </div>
                    <div class="sc_warp">
                        <div class="goods_item">

                            <div class="tit">商户数</div>
                            <div class="number">

                                <div class="st">实体：{$shop}</div>
                            </div>
                        </div>
                        <div class="goods_item">

                            <div class="tit">商品数</div>

                            <div class="number">

                                <div class="st">产品：{$goods}</div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="contentWarp_item clearfix">

                <div class="clear"></div>
                <div class="section section_order_count">
                    <div class="sc_title">
                        <i class="sc_icon"></i>
                        <h3>订单统计</h3>
                        <div class="filter_date">
                            <a href="javascript:;" onClick="set_statistical_chart(this, 'order', 'week')" class="active">七天</a>
                            <a href="javascript:;" onClick="set_statistical_chart(this, 'order', 'month')">一月</a>
                            <a href="javascript:;" onClick="set_statistical_chart(this, 'order', 'year')">半年</a>
                        </div>
                    </div>
                    <div class="sc_warp">
                        <div id="order_main" style="height: 274px; -webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0);" _echarts_instance_="1482567663284"><div style="position: relative; overflow: hidden; width: 975px; height: 274px;"><div data-zr-dom-id="bg" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 975px; height: 274px; user-select: none;"></div><canvas width="975" height="274" data-zr-dom-id="0" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 975px; height: 274px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas><canvas width="975" height="274" data-zr-dom-id="1" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 975px; height: 274px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas><canvas width="975" height="274" data-zr-dom-id="_zrender_hover_" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 975px; height: 274px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas></div></div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

<div id="footer" style="position: static; bottom: 0px;">
    <p>融百微</p>
</div>
<script type="text/javascript">
    $(function(){
        $("*[data-toggle='tooltip']").tooltip({
            position: {
                my: "left top+5",
                at: "left bottom"
            }
        });
    });
</script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.purebox.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/echart/echarts.min.js"></script>
<script type="text/javascript">
    //    function set_statistical_chart(obj, type, date)
    //    {
    //
    //
    //    // 基于准备好的dom，初始化echarts实例
    //    var myChart = echarts.init(document.getElementById('main'));
    //
    //    myChart.title = '多 X 轴示例';
    //
    //    var colors = ['#5793f3', '#d14a61', '#675bba'];
    //
    //    }

    set_statistical_chart(".section_order_count .filter_date a:first", "order", "week"); //初始设置
    set_statistical_chart(".section_total_count .filter_date a:first", "userinfo", "week"); //初始设置
    function set_statistical_chart(obj, type, date)
    {
        switch(type){
            case 'order':
                var i = '个';
                var y = '订单个数';
                break;
            case 'userinfo':
                var i = '人';
                var y = '增加人数';
                break;
        }
        var obj = $(obj);
        obj.addClass("active");
        obj.siblings().removeClass("active");

        $.ajax({
            type:'get',
            url:"{:url('index/report')}",
            data:'act=set_statistical_chart&type='+type+'&date='+date,
            dataType:'json',
            success:function(data){
                if(type == 'order'){
                    var div_id = "order_main";
                }
                if(type == 'userinfo'){
                    var div_id = "total_main";
                }
                var myChart = echarts.init(document.getElementById(div_id));

                var option = {
                    title : {
                        text: ''
                    },
                    tooltip : {
                        trigger: 'axis',
                        backgroundColor:"#f5fdff",
                        borderColor:"#8cdbf6",
                        borderRadius:"4",
                        borderWidth:"1",
                        padding:"10",
                        textStyle:{
                            color:"#272727",
                        },
                        axisPointer:{
                            lineStyle:{
                                color:"#6cbd40",
                            }
                        }
                    },
                    toolbox: {
                        show : true,
                        orient:"vertical",
                        x:"right",
                        y:"60",
                        feature : {
                            magicType : {show: true, type: ['line', 'bar']},
                            saveAsImage : {show: true}
                        },
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            axisLine:{
                                lineStyle:{
                                    color:"#ccc",
                                    width:"0",
                                }
                            },
                            data : data.week,
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLine:{
                                lineStyle:{
                                    color:"#ccc",
                                    width:"0",
                                }
                            },
                            axisLabel : {
                                formatter: '{value}'+i,
                            }
                        }
                    ],
                    series : [
                        {
                            name:y,
                            type:'line',
                            itemStyle:{
                                normal:{
                                    color:"#6cbd40",
                                    lineStyle:{
                                        color:"#6cbd40",
                                    }
                                }
                            },
                            data:data.sum,
                            markPoint : {
                                itemStyle:{
                                    normal:{
                                        color:"#6cbd40"
                                    }
                                },
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            }
                        }

                    ]
                }

                myChart.setOption(option);
            }
        })
    }
    // 使用刚指定的配置项和数据显示图表。


</script>
</body>

</html>